import { ref, reactive, toRaw } from 'vue'
import { useStore } from '@/store'
import { ordersListType, timelineDataType } from '@/store/storeType'


// 分页器参数
export const pageData = reactive({
  query: '',
  pageNum: 1,
  pageSize: 5
})

// 搜索框和搜索按钮
export const searchInputValueAndClick = reactive({
  inputValue: '',
  searchClick() {
    pageData.query = searchInputValueAndClick.inputValue
  },
  blurValueEvent() {
    if (!searchInputValueAndClick.inputValue) {
      pageData.query = searchInputValueAndClick.inputValue
    }
  }
})

// 修改订单参数默认值
export const changeOrdersFormData = reactive({
  changeIsPayment: '0',
  changeIsSwitch: '否',
  changeSelectValue: '',
  changeOrdersPriceVal: 0,
  changeOrdersNumVal: ''
})

// 物流对话框参数
export const progressObj: { progressVisible: boolean, progressInfo: timelineDataType[] } = reactive({
  progressVisible: false,
  progressInfo: []
})

const orderVal = ref<ordersListType>({})

// 按钮点击 事件
export const btnsEvntsFn = (changeOrdersObj: any) => {
  const store = useStore()
  const btnObj = reactive({
    showBox(row: ordersListType) {
      orderVal.value = toRaw(row)
      changeOrdersFormData.changeIsPayment = row.pay_status as string
      changeOrdersFormData.changeIsSwitch = row.is_send as string
      changeOrdersFormData.changeSelectValue = row.order_pay as string
      changeOrdersFormData.changeOrdersPriceVal = row.order_price as number
      changeOrdersFormData.changeOrdersNumVal = row.order_number as string
      changeOrdersObj.dialogVisible = true
    },
    showProgressBox() {
      store.dispatch('getExpressList', 1).then(() => {
        progressObj.progressInfo = store.state.ordersModule.expressData
        progressObj.progressVisible = true
      })
    }
  })

  return { btnObj }
}

// 编辑订单事件集合
export const changeOrdersFn = () => {
  const store = useStore()
  const changeOrdersObj = reactive({
    dialogVisible: false,
    handleClose() {
      changeOrdersObj.dialogVisible = false
    },
    changeFormSubmitClick() {
      store.dispatch('putChangeOrders', {
        order_id: orderVal.value.order_id,
        putData: {
          is_send: changeOrdersFormData.changeIsSwitch,
          order_pay: changeOrdersFormData.changeSelectValue,
          order_price: changeOrdersFormData.changeOrdersPriceVal,
          order_number: changeOrdersFormData.changeOrdersNumVal,
          pay_status: changeOrdersFormData.changeIsPayment
        }
      }).then(() => {
        // ordersObj.value.orders = store.state.ordersModule.ordersObj.orders
        changeOrdersObj.dialogVisible = false
      })
    }
  })

  return { changeOrdersObj }
}
